<script setup>
import { onMounted, ref, watch, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import tabber from "@/components/tabber.vue";
import { searList } from './Api/user';
import { useStore } from './store/useStore';
const responseMessage = ref('')
const Store = useStore()
// console.log(Store.info.nickname);
const frined = ref(Store.friendlist)
// console.log(frined.value.nickname);
const $route = useRoute()

watch(() => Store.info, () => {
  const token = localStorage.getItem("access_token")
  const user = localStorage.getItem('user')
  if (user) {
    const userInfo = JSON.parse(user)
    // console.log(userInfo.info, 'App14');
  }

  const { id } = Store.info
  if (token && id) {
    const ws = new WebSocket(`ws://localhost:3000/ws?userid=${id}`)
    Store.setWs(ws)
    ws.onopen = () => {
      console.log("链接成功");
    }
    ws.onerror = (e) => {
      console.log(e);
    }
    ws.onclose = () => {
      console.log("链接失败");
    }
    ws.onmessage = (e) => {
      const msg = JSON.parse(e.data)
      // Store.setMsg(msg)
      // console.log(msg, 'mmm');

      if (msg.type === 0) {
        Store.setUserList(msg.data)
      } else if (msg.type === 1) {
        Store.addList(msg.data)
      }
    }
  }
}, {
  immediate: true,
  deep: true
})
</script>

<template>
  <router-view></router-view>
  <tabber v-if="$route.meta.isshow" />
</template>
<style lang="scss" scoped></style>